<template>
  <div class="tool-cross-data">
    <div class="outSide">
      <div v-for="(item, index) in option" :key="index" class="cell">
        <div
          class="cell-item"
          :style="{
            background:
              item.flag == true
                ? $methods.gradientReturnString('bg',attr.linearGradient)
                : item.flag == false
                ? $methods.gradientReturnString('bg',attr.linearGradientActive)
                : attr.backgroundColor,
          }"
        >
          <span
            class="item-title"
            v-if="index < day"
            :style="{
              fontSize: `${attr.fontSize}px`,
              color: attr.fontColor,
            }"
          >
            {{ index + 1 }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import complex from "../mixin";
export default {
  name: "tool-cross-data",
  mixins: [complex],
  data() {
    return {
      tableData: {
        days: 0,
        dayList: [
          true,
          false,
          true,
          true,
          false,
          true,
          true,
          false,
          true,
          true,
          false,
          true,
        ],
      },
      datalist: [],
      day: 31, // 当前月份天数
      dateConfig: [
        {
          days: null,
          week: null,
        },
      ],
      attr: {
        backgroundColor: "rgba(32, 33, 35, 0.1)",
        defaultColor: "#33FF00",
        activeColor: "#FF3333",
        borderColor: "#409eff",
        fontSize: 16,
        fontColor: "#000",
      },
    };
  },
  computed: {
    option() {
      this.datalist.forEach((item, index) => {
        item.flag = this.tableData.dayList[index];
      });
      return this.datalist;
    },
  },
  created() {
    this.initData();
    this.loadDate();
  },
  methods: {
    initData() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = new Date(year, month, 0);
      this.day = day.getDate();
      this.datalist = Array.from(
        {
          length: 33,
        },
        () => {
          return {};
        }
      );
    },
    loadDate() {
      var now = new Date();
      var d = new Date(now.getFullYear(), now.getMonth() + 1, 0);
      this.dateConfig.days = d.getDate();
      this.dateConfig.week = new Date().getDate();
      this.dateConfig.today = new Date().getDate();
    },
  },
  pageData: {
    version: "0.0.1",
    name: "tool-cross-data",
    title: "绿十字",
    count: 0,
    width: 560,
    height: 480,
    config: {
      label: "绿十字",
      data: null,
      attr: [
        {
          key: "backgroundColor",
          title: "背景颜色",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: "rgba(32, 33, 35, 0.1)",
        },
		{
          key: "linearGradient",
          title: '默认背景', // 渐变色
		  hiddenTitle: true,
          hidden: false,
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#409eff", "#0967F2"],
          },
        },
		{
          key: "linearGradientActive",
          title: "突出背景", // 渐变色
		  hiddenTitle: true,
          hidden: false,
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#F02D11", "#C16C53"],
          },
        },
        {
          key: "defaultColor",
          title: "默认颜色",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: "#33FF00",
        },
        // {
        //   key: "activeColor",
        //   title: "高亮背景",
        //   formType: "text-string",
        //   group: "basics",
        //   type: "String",
        //   data: "#FF3333",
        // },
        {
          key: "fontColor",
          title: "字体颜色",
          formType: "text-string",
          group: "text",
          type: "String",
          data: "#000",
        },
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-string",
          group: "text",
          type: "String",
          data: "16",
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-cross-data {
  width: 100%;
  height: 100%;

  .outSide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    .cell {
      width: 14.2%;
      height: 14.2%;
      text-align: center;
      font-size: 10px;
      padding: 1px;
      background: rgba(32, 33, 35, 0.1);
      cursor: pointer;

      .cell-item {
        width: 100%;
        height: 100%;
        // border: 0.5px solid #409eff;

        .item-title {
          font-size: 16px;
        }
      }

      div {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .cell:nth-child(3),
    .cell:nth-child(6),
    .cell:nth-child(30) {
      margin-right: 28.4%;
    }

    .cell:nth-child(1),
    .cell:nth-child(4),
    .cell:nth-child(28),
    .cell:nth-child(31) {
      margin-left: 28.4%;
    }
  }
}
</style>
